/* eslint-disable max-lines */
import * as BASE from '@/stores/definitions-base';
import { Input, Switch, Radio, NumberPicker, DatePicker2 } from '@alifd/next';
import { t } from '@lingui/macro';
import React from 'react';
import { ellipsisRender } from '@/components/TauTable';
import { DictItemSelect } from '@/components/biz';
import TauSimpleSelect from '@/components/TauSimpleSelect';

const RadioGroup = Radio.Group;

const {
  DATETIME_TEXT,
  DATE_TEXT,
  TIME_TEXT,
  EMPTY_TEXT,
  ENUMS: ENUMSBase,
  FieldsGrid: FieldGridBase,
  TitleGrid,
  column: columnBase,
  toSelectDataSource,
} = BASE;
export { DATETIME_TEXT, DATE_TEXT, EMPTY_TEXT, TIME_TEXT, TitleGrid, toSelectDataSource };

/**
 * @param {*} path        属性path
 * @param {*} props       column属性
 * @returns column定义
 */
export function column(...args) {
  return columnBase(model, ...args);
}

/**
 * 显示一组表单字段
 * ```js
 * {
 *   fields: string[],    // 字段名称，可以使用.来指定嵌套对象属性，例如order.busOrder.shift
 *   columns: number,     // 列数，默认为4,最大为12,最小为1
 *   model: object,       // 字段定义数据模型的根对象，默认不指定，仅在使用子对象作为根模型时设置
 *   overrideModel: object, // 重载字段定义数据模型
 *   mode: string,        // 表单模式，默认为edit，可选view
 *   itemLayout: object,  // FormItem布局配置，默认为{}
 * }
 * ```
 *
 * @param {object} param0
 * @returns
 */
export function FieldsGrid(props) {
  return <FieldGridBase model={model} {...props} />;
}

//----------------------------------------------------------------------
export const ENUMS = {
  ...ENUMSBase,
  // <br/> 0-主动<br/> 1-被动
  triggerMethod: {
    0: t`主动`,
    1: t`被动`,
  },
  // <br/> 1-全局公告<br/> 2-活动公告
  type: {
    1: t`全局公告`,
    2: t`活动公告`,
  },
  // <br/> 0-无<br/> 1-跳转链接<br/> 2-领取优惠券
  interactionMode: {
    1: t`链接跳转`,
    2: t`领取优惠券`,
    3: t`内部链接跳转`,
  },
};

/**
 * 模型定义：
 * 1. 普通文本仅需要定义label
 * 2. 需要通过枚举转换的值，定义text; 当使用renderer返回组件时，text属性无效，需要通过组件的renderPreview来指定预览时的绘制方式
 * 3. 通用的ui属性需要定制时，定义ui; 特定模式(view, edit, add)下的ui，添加后缀定义为ui_<mode>，例如：ui_view, ui_edit, ui_add, ui_table
 * 4. ui可配置属性包括:
 *    renderer: 内容渲染函数, Form表单中的原型为：(value: any, formData: any, fieldDefinition: any) => ReactNode; Table Column中的原型为: (value: any, columnIndex: number, rowData: any) => ReactNode;
 *    itemProps: 表单Form.Item的属性，可以是对象，或函数({ isPreview: boolean, mode: string, value: any, formData: any, ...otherDefinitions}) => void;
 *    span: Grid Cell占用的列数, 默认为1
 *
 * 【注】获取接口的model定义后，vscode中通过正则替换：^(\s+)"label": "([^']+)"  ===> $1label: t`$2`
 */
export const model = {
  id: {
    label: t`标识`,
  },
  type: {
    label: t`公告类型`,
    text: (v) => ENUMS.type[v],
    ui: {
      renderer: (v) => {
        return (
          <RadioGroup value={v}>
            <Radio id="apple" value="1" key="1">
              {t`全局公告`}
            </Radio>
            <Radio id="watermelon" value="2" key="2">
              {t`活动公告`}
            </Radio>
            <Radio id="watermelon" value="" key="3">
              {t`无`}
            </Radio>
          </RadioGroup>
        );
      },
    },
  },
  triggerMethod: {
    label: t`触发方式`,
    text: (v) => ENUMS.triggerMethod[v],
    ui: {
      renderer: (v) => {
        return (
          <RadioGroup value={v}>
            <Radio id="apple" value="0" key="0">
              {t`主动`}
            </Radio>
            <Radio id="watermelon" value="1" key="1">
              {t`被动`}
            </Radio>
            <Radio id="watermelon" value="" key="2">
              {t`无`}
            </Radio>
          </RadioGroup>
        );
      },
    },
  },
  relatedInfo: {
    label: t`关联信息`,
  },
  name: {
    label: t`名称`,
    text: (v) => ellipsisRender(v),
    ui: {
      renderer: (v) => <Input value={v} placeholder="请输入名称" />,
      itemProps: { required: true },
    },
  },
  mainTitle: {
    label: t`主标题`,
    text: (v) => ellipsisRender(v),
    ui: {
      renderer: (v) => <Input value={v} placeholder="请输入主标题" />,
    },
  },
  subTitle: {
    label: t`副标题`,
    ui: {
      renderer: (v) => <Input value={v} placeholder="请输入副标题" />,
    },
  },
  link: {
    label: t`链接`,
    text: (v) => ellipsisRender(v),
    ui: {
      renderer: (v) => <Input value={v} placeholder="请输入链接" />,
    },
  },
  imgConfigs: {
    label: t`图片配置`,
    name: {
      label: t`名称`,
    },
    type: {
      label: t`格式`,
    },
    uid: {
      label: t`文件id`,
    },
  },
  enable: {
    label: t`是否启用`,
    text: (v, r) => (
      <Switch
        checked={v}
        checkedChildren="是"
        unCheckedChildren="否"
        autoWidth
        size="small"
        onClick={() => rootStore.noticeStore.upDateState(r)}
      />
    ),
    ui: {
      renderer: (v) => <Switch checked={v} checkedChildren="是" unCheckedChildren="否" autoWidth size="small" />,
    },
  },
  beginTime: {
    label: t`开始日期`,
  },
  endTime: {
    label: t`结束日期`,
  },
  timeScope: {
    label: t`时间范围`,
    ui: {
      renderer: (v) => <DatePicker2.RangePicker style={{ width: '100%' }} showTime outputFormat={DATETIME_TEXT} timePanelProps={{ format: 'HH:mm', minuteStep: 5 }} value={v || []} format="YYYY-MM-DD HH:mm" />,
    },
  },
  content: {
    label: t`内容`,
    text: (v) => ellipsisRender(v),
    ui: {
      renderer: (v) => <Input.TextArea placeholder="请输入内容" value={v} />,
      span: 2,
    },
  },
  showPalace: {
    label: t`展示位置`,
    ui: {
      renderer: (v) => <DictItemSelect dictId="travelPagePath" value={v} mode="multiple" />,
    },
  },
  sortWeight: {
    label: t`权重`,
    ui: {
      renderer: (v) => <NumberPicker value={v} min={1} />,
    },
  },
  interactionMode: {
    label: t`交互方式`,
    text: (v) => ENUMS.interactionMode[v],
    ui: {
      renderer: (v) => <TauSimpleSelect value={v} data={toSelectDataSource(ENUMS.interactionMode)} />,
    },
  },
  activityId: {
    label: t`活动名称`,
    ui: {
      renderer: (v) => <TauSimpleSelect value={v} data={rootStore.noticeStore.activitys} />,
    },
  },
  extra: {
    label: t`额外参数`,
  },
  crBy: {
    label: t`创建者`,
  },
  upBy: {
    label: t`最后修改者`,
  },
  crDate: {
    label: t`创建时间`,
  },
  upDate: {
    label: t`最后修收时间`,
  },
  tenantId: {
    label: t`租户ID`,
  },
  // 前段新增
  extras: {
    label: t`额外参数`,
  },
};
